<?xml version="1.0" encoding="UTF-8"?>
<ui:component xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

	<ui:composition template="/pages/templates/layout_principal.xhtml">
		<ui:define name="message">
			<rich:messages globalOnly="true" showSummary="true" showDetail="true" ajaxRendered="false">
			</rich:messages>
		</ui:define>
		
		<ui:define name="body" width="100%">
			<h:form>
				<h:panelGrid styleClass="titulo">
					<h:outputText styleClass="titulo" value="Meus Projetos" />
				</h:panelGrid>
				
				<br />
				
				<rich:collapsiblePanel header="Pesquisa" switchType="client">
					<table class="form_tabela">
						<tr>
							<td class="form_label">Nome:</td>
							<td>
								<h:inputText id="nomeProjeto" value="#{manterProjetosControl.nome}" maxlength="80" size="100" />
								<rich:message for="nomePessoa" />
							</td>
						</tr>
						<tr>
							<td class="form_label">Situações:</td>
							<td>
								<h:selectManyCheckbox value="#{manterProjetosControl.situacoesSelecionadas}">
									<f:selectItems value="#{manterProjetosControl.todasSituacoes}"
										var="s" itemLabel="#{s.descricao}" itemValue="#{s}" />
								</h:selectManyCheckbox>
							</td>
						</tr>
					</table>
					<hr />
					<h:panelGrid styleClass="botoes" columns="2">
						<h:commandButton action="#{manterProjetosControl.pesquisar}" value="Pesquisar" styleClass="btn_principal" />
						<h:commandButton value="Novo Projeto" action="#{manterProjetosControl.novo}" />
					</h:panelGrid>
				</rich:collapsiblePanel>
				
				<br />
				<br />
				
				<rich:dataTable id="listaProjetos" 
					var="projeto"
					value="#{manterProjetosControl.projetos}"
					rowClasses="odd-row, even-row" 
					styleClass="stable">
					
					<f:facet name="header">
						<rich:columnGroup>
							<rich:column>Nome</rich:column>
							<rich:column>Data Cadastro</rich:column>
							<rich:column>Início Estimado</rich:column>
							<rich:column>Fim Estimado</rich:column>
							<rich:column>Situação</rich:column>
							<rich:column>Início Realizado</rich:column>
							<rich:column>Fim Realizado</rich:column>
							<rich:column colspan="3">Operações</rich:column>
						</rich:columnGroup>
					</f:facet>
					
					<rich:column>
						#{projeto.nome}
					</rich:column>
					<rich:column style="width: 10%;  text-align: center;">
						<h:outputText value="#{projeto.dataCriacao}">
							<f:convertDateTime pattern="dd/MM/yyyy" />
						</h:outputText>
					</rich:column>
					<rich:column style="width: 10%; text-align: center;">
						<h:outputText value="#{projeto.inicio}">
							<f:convertDateTime pattern="dd/MM/yyyy" />
						</h:outputText>
					</rich:column>
					<rich:column style="width: 10%; text-align: center;">
						<h:outputText value="#{projeto.fim}">
							<f:convertDateTime pattern="dd/MM/yyyy" />
						</h:outputText>
					</rich:column>
					<rich:column style="width: 15%; text-align: center;">
						#{projeto.situacao.descricao}
					</rich:column>
					<rich:column style="width: 10%; text-align: center;">
						<h:outputText value="#{projeto.inicioRealizado}">
							<f:convertDateTime pattern="dd/MM/yyyy" />
						</h:outputText>
					</rich:column>
					<rich:column style="width: 10%; text-align: center;">
						<h:outputText value="#{projeto.fimRealizado}">
							<f:convertDateTime pattern="dd/MM/yyyy" />
						</h:outputText>
					</rich:column>
					
					<rich:column style="width: 3%; text-align: center;">
						<h:commandLink action="#{manterProjetosControl.editar}" immediate="true">
							<f:setPropertyActionListener target="#{manterProjetosControl.idProjetoSelecionado}" value="#{projeto.id}"/>
							<h:graphicImage library="images" name="pencil.png" title="Editar Projeto" />
						</h:commandLink>
					</rich:column>
					
					<rich:column style="width: 3%; text-align: center;">
						<a4j:commandLink action="#{manterProjetosControl.confirmacaoCancelamento}" execute="@this" 
							render="panelCancelarProjeto" oncomplete="#{rich:component('panelCancelarProjeto')}.show()" immediate="true">
							<a4j:param assignTo="#{manterProjetosControl.idProjetoSelecionado}" value="#{projeto.id}" />
							<h:graphicImage library="images" name="cancel.png" title="Cancelar Projeto" />
						</a4j:commandLink>
					</rich:column>
					
					<rich:column style="width: 3%; text-align: center;">
						<h:commandLink action="#{manterProjetosControl.excluir}"  onclick="return confirm('Deseja realmente excluir o projeto #{projeto.nome}?')" immediate="true">
							<f:setPropertyActionListener target="#{manterProjetosControl.idProjetoSelecionado}" value="#{projeto.id}"/>
							<h:graphicImage library="images" name="delete.png" title="Excluir Projeto" />
						</h:commandLink>
					</rich:column>
					
				</rich:dataTable>
				
				<!-- Panel Cancelar Projeto -->
				<rich:popupPanel id="panelCancelarProjeto" modal="true" resizeable="false" autosized="true" 
					header="Cancelar Projeto #{manterProjetosControl.projeto.nome}" domElementAttachment="form">
					<rich:messages globalOnly="true" showSummary="true" showDetail="true">
					</rich:messages>
					<h:outputText value="Tem certeza que deseja cancelar o projeto '#{manterProjetosControl.projeto.nome}'?" styleClass="form_label" />
					<br/>
					<h:outputText value="Caso positivo, informe o motivo do cancelamento:" styleClass="form_label" />
					<br/>
					<h:inputTextarea id="motivoCancelamento" value="#{manterProjetosControl.motivoCancelamento}" cols="80" rows="8">
						<f:validateLength maximum="1000" />
					</h:inputTextarea>
					
					<br/>
					
					<h:panelGrid columns="2" styleClass="botoes">
						<a4j:commandButton value="Confirmar" render="listaProjetos" 
							execute="@form" action="#{manterProjetosControl.cancelar}" 
							oncomplete="if (#{!facesContext.validationFailed and (empty facesContext.messageList)}) { #{rich:component('panelCancelarProjeto')}.hide(); }" />
							
						<h:button value="Fechar" onclick="#{rich:component('panelCancelarProjeto')}.hide(); return false;" />
					</h:panelGrid>
				</rich:popupPanel>
			</h:form>
			
			<rich:jQuery  selector=".stable tr" event="mouseover" query="jQuery(this).addClass('active-row')" />
			<rich:jQuery selector=".stable tr" event="mouseout" query="jQuery(this).removeClass('active-row')" />
		</ui:define>
		<rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />
		<rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />

	</ui:composition>

</ui:component>